<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#333"
			:title="pageTitle" :fontWeight="600" :isShowTitle="true">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="deposit-box">
				<view class="title">服务费充值</view>
				<view class="input-box">
					<view class="fu">￥</view>
					<view class="inputFocus">
						<input type="digit" v-model="rechargeAmount" />
					</view>
				</view>
			</view>
			<view class="remark-box">
				<view class="remark">
					<input v-model="rechargeRemark" class="uni-input" placeholder="备注"
						placeholderStyle="font-size: 24rpx;font-weight: 400;color: #B1B3B0;line-height: 44rpx;" />
				</view>
			</view>
			<button class="btn-primary btn-submit" @tap.stop.prevent="submit">确认</button>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import dayjs from "dayjs";
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {},
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				pageTitle: '服务费充值', //标题
				rechargeAmount: null,
				rechargeRemark: null,
				loading: false,
				codeTimer: null, //定时器
				codeTime: 14, // 限制1分钟后没请求到erp数据，不再继续请求
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		onLoad(options) {},
		onShow: function() {},
		onHide() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			payState(id) {
				let that = this
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/platform-recharge/query/recharge-state", id,
						(result) => {
							console.log('支付结果', result);
							if (result.data.payState != 0) {
								that._clearCount()
								that.$refs.toast.hide()
								setTimeout(() => {
									that.$refs.toast.show({
										type: 'success',
										message: "充值成功"
									})
									setTimeout(() => {
										that.$refs.toast.hide()
									}, 1000)
								}, 200)
							}
							resolve(result);
						}, () => {
							that.$refs.toast.hide()
							that._clearCount()
						}, null, () => {
							that.$refs.toast.hide()
							that._clearCount()
						},
					);
				});
			},
			_codeCount(id) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				that.codeTimer = setInterval(() => {
					if (that.codeTime <= 0) {
						clearInterval(that.codeTimer);
						that.codeTimer = null;
						that.codeTime = 0;
						that.$refs.toast.hide()
						/* 清除定时的逻辑*/
					} else {
						/*未请求到接口，继续请求数据*/
						that.payState(id)
						that.codeTime--;
					}
				}, 2000);
			},
			//清除定时器
			_clearCount() {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
				this.codeTime = 0;
				this.rechargeAmount = null;
				this.rechargeRemark = null;
			},
			saveReserve(params) {
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/platform-recharge/submit", params,
						(result) => {
							resolve(result);
						}, null, () => {
							this.loading = true
							resolve();
						}
					);
				});
			},
			payment(params) {
				let that = this
				that.$refs.toast.show({
					type: 'loading',
				})
				let provider = uni.getProvider({
					service: 'payment'
				})
				that.saveReserve(params).then(res => {
					that.$refs.toast.hide()
					let data = JSON.parse(res.data.payCode)
					console.log(data);
					// res为调起微信支付所需参数
					// 调起微信支付
					uni.requestPayment({
						provider: 'wxpay', // 服务提提供商
						appId: data.appId,
						timeStamp: data.timeStamp, // 时间戳
						nonceStr: data.nonceStr, // 随机字符串
						package: data.package,
						signType: data.signType, // 签名算法
						paySign: data.paySign, // 签名
						success: function(success) {
							console.log('支付成功', success);
							// 业务逻辑。。。
							that._codeCount(res.data.platformRechargeId)
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					});
				}).catch(err => {
					console.log(err);
				})
			},
			submit() {
				let that = this
				if (!that.rechargeAmount) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入充值金额"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.rechargeRemark) {
					that.$refs.toast.show({
						type: 'default',
						message: "请填写备注"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				let params = {
					"rechargeAmount": that.rechargeAmount,
					"rechargeRemark": that.rechargeRemark,
				}
				throttle(that.payment(params), 1000, true)
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F6F8F7;
		background-size: 100% 640rpx;

		.pdCkeckOut {
			padding: 15rpx;
			padding-right: 10rpx;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 212rpx 24rpx 66rpx;
			/* #ifdef H5 */
			padding: 124rpx 24rpx 66rpx;
			/* #endif */
			height: 100%;

			.deposit-box {
				width: 702rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 28rpx;

				.title {
					font-size: 26rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin-bottom: 53rpx;
				}
			}

			.btn-submit {
				margin-top: 36rpx;
			}

			.remark-box {
				background: #FFFFFF;
				border-radius: 12rpx;
				box-sizing: border-box;
				padding: 28rpx;
				margin-top: 24rpx;

				.uni-input {
					padding: 17rpx 28rpx;
					background: #F7F9F5;
					border-radius: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 44rpx;
				}
			}

			.hite {
				font-size: 26rpx;
				font-weight: 400;
				color: #FF4664;
				line-height: 37rpx;
				margin-bottom: 37rpx;
			}

			.input-box {
				display: flex;
				align-items: flex-end;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #E3E9E5;
				box-sizing: border-box;
				padding-bottom: 24rpx;
				margin-bottom: 37rpx;

				.fu {
					font-size: 44rpx;
					font-weight: 900;
					color: #282D2D;
				}

				.inputFocus {
					flex: 1;
					font-size: 44rpx;
				}

				.remaining {
					font-size: 26rpx;
					font-weight: 400;
					color: #999B9B;
				}
			}

			.withdraw {
				font-size: 26rpx;
				font-weight: 400;
				color: #282D2D;
				line-height: 37rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.bank {}
			}
		}
	}
</style>